import React, { useState } from 'react'
import { Card, Avatar } from 'antd';
import { imgBaseUrl } from '../config/globle.js'

export default function Home() {
  const { deptName, roleName, lastLoginTime, avatar, username } = JSON.parse(localStorage.user);
  return (
    <div>
      <Card
        style={{
          width: "100%",
          height: "130px"
        }}
      >
        <div style={{ display: "flex" }}>
          <div style={{ display: "flex" }}>
            <div>
              <Avatar src={imgBaseUrl + "/" + avatar} shape="square" size={64} />
            </div>
            <div style={{ width: "300px" }}>
              <h4>下午好，{username}，要不要和朋友打局LOL</h4>
              <p style={{ color: "grey", fontSize: "12px", margin: "0px" }}>{deptName} | {roleName}</p>
              <p style={{ color: "grey", fontSize: "12px" }}>上次登录时间：{lastLoginTime}</p>
            </div>
          </div>
          <div style={{ display: "flex", width: "240px", marginLeft: "360px" }}>
            <div style={{ width: "240px" }}>
              <p style={{ color: "grey", }}>今日IP</p>
              <p style={{ color: "#189EFF" }}>1</p>
            </div>
            <div style={{ width: "240px" }}>
              <p style={{ color: "grey" }}>今日访问</p>
              <p style={{ color: "#189EFF" }}>249</p>
            </div>
            <div style={{ width: "240px" }}>
              <p style={{ color: "grey" }}>总访问亮</p>
              <p style={{ color: "#189EFF" }}>2149</p>
            </div>
          </div>
        </div>
      </Card>
      <div style={{ marginTop: "10px" ,display:"flex"}}>
        <Card style={{ width: 480, height: 300 }}>
          <div>

          </div>
        </Card>
        <Card style={{ width: 480, height: 260 , marginLeft: "20px"}}>
          <div>

          </div>
        </Card>
      </div>
    </div>

  )
}
